<template>
  <header class="head">
    <div class="title">
      <!-- logo + 标题 -->
      <img src="../../assets/logo1.png" alt="数字政府">
      <!-- 搜索框 -->
      <div class="search">
        <el-input type="text" placeholder="请输入..." />
        <el-icon>
          <Search />
        </el-icon>
      </div>
    </div>
  </header>

  <body>
    <!-- 导航栏 -->
    
      <NavBar></NavBar>
    
    <!-- <router-view to="555"> 
  </router-view> -->
  <!-- 轮播图 -->
   <div class="banner">
    <Banner></Banner>
   </div>
  </body>
</template>

<script setup lang="ts">
import NavBar from './NavBar/NavBar.vue';
import Banner from './Banner/Banner.vue';
</script>

<style scoped lang="scss">
body {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

/* 标题 */
header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #439bff;

  .title {
    width: 1080px;
    display: flex;
    justify-content: space-between;

    img {
      width: 100px;
    }

    .search {
      display: flex;
      align-items: center;

      .el-input {
        height: 30px;
      }

      .el-icon {
        color: #00fca8;
        margin-left: 10px;

      }
    }

  }
}

/* 导航栏 */
nav,.banner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  // background-color: #fff;

}
</style>